<!DOCTYPE html>
<html lang="ru">
  <head>
    <!-- <title>Welcome to CareMyBaby!</title> -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/profile/profile.css" />
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
      (function (m, e, t, r, i, k, a) {
        m[i] =
          m[i] ||
          function () {
            (m[i].a = m[i].a || []).push(arguments);
          };
        m[i].l = 1 * new Date();
        for (var j = 0; j < document.scripts.length; j++) {
          if (document.scripts[j].src === r) {
            return;
          }
        }
        (k = e.createElement(t)),
          (a = e.getElementsByTagName(t)[0]),
          (k.async = 1),
          (k.src = r),
          a.parentNode.insertBefore(k, a);
      })(
        window,
        document,
        "script",
        "https://mc.yandex.ru/metrika/tag.js",
        "ym"
      );

      ym(97272843, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
      });
    </script>
    <noscript
      ><div>
        <img
          src="https://mc.yandex.ru/watch/97272843"
          style="position: absolute; left: -9999px"
          alt=""
        /></div
    ></noscript>
    <!-- /Yandex.Metrika counter -->
  </head>
  <body>
    <div class="navbar">
      <a class="tab" id="home" href="/">
        <img src="/image/house-1.svg" alt="house"/>
        <label for="home">Главная</label>
      </a>
      <a class="tab" id="pay" class="mButton" href="/pay/">
        <img src="/image/wallet2.svg" alt="wallet"/>
        <label for="pay">Баланс</label>
      </a>
      <a class="tab" id="schedule" class="mButton" href="/schedule/">
        <img src="/image/calendar-week.svg" alt="calendar"/>
        <label for="schedule">Расписание</label>
      </a>
      <a class="tab" id="item" href="/items/"
        ><img src="/image/mortarboard.svg" alt="mort"/>
        <label for="item">Предметы</label>
      </a>
      <a class="tab" id="another" href="/another/"
        ><img src="/image/three-dots.svg" alt="dots"/>
        <label for="another">Еще</label>
      </a>
    </div>
    <div class="main">
      <div class="headerProfile">
        <div class="circelProfile">
          <p id="profileImg">И</p>
          <div class="littleCircle">
            <img id="uploadImg" src="/image/pencil.svg" />
          </div>
        </div>
        <div class="infoClient">
          <h1 id="clientNameProfile">Имя</h1>
          <p id="clienIdProfile">Id клиента</p>
        </div>
      </div>

      <div class="bodyProfile">
        <div class="firstBodyContainer">
          <div class="bodyContainer">
            <h2 id="lessonsMinutes"></h2>
            <p class="tooltip">отзанимались с нами</p>
          </div>
          <div class="bodyContainer">
            <h2 id="clientVisit"></h2>
            <p class="tooltip">уроков с нами</p>
          </div>
        </div>
        <div class="secondBodyContainer">
          <div class="bodyContainer">
            <h2 id="amountAvarage"></h2>
            <p class="tooltip">средняя длина урока</p>
          </div>
          <div class="bodyContainer">
            <h2 id="bonusesGet"></h2>
            <p class="tooltip">бонусов получено</p>
          </div>
        </div>
      </div>

      <!-- <div class="logOut">
        <button id="logOut" class="btn">Выйти</button>
      </div> -->
      <p id="logOut">Выйти</p>
    </div>
    <script src="./script.js" type="module"></script>
  </body>
</html>
